<template>
  <div class="innerpage headspace">
    <Header active="1"></Header>
    <div class="bread">
      <div class="page-inner">
        <NuxtLink to="/">Home</NuxtLink>><NuxtLink to="/Manufacturers"
          >Database</NuxtLink
        >><NuxtLink to="/APIs">Active Pharmaceutical Ingredient (API)</NuxtLink
        ><span>>{{ dataInfo.ingredient }}</span>
      </div>
    </div>
    <div class="detailBox" id="p1">
      <div class="box flex page-inner">
        <div class="col">
          <div class="mliks">
            <div class="mt f24 font-m">Content</div>
            <div class="items">
              <div class="i"><a href="#p1" title="Physico-Chemical Properties">Physico-Chemical Properties</a></div>
              <div class="i"><a href="#p5" title="Purpose and Search Strategy">Purpose and Search Strategy</a></div>
              <div class="i"><a href="#p3" title="Mechanism of Action">Mechanism of Action</a></div>

              <div class="i"><a href="#p12" title="Pharmacodynamics">Pharmacodynamics</a></div>
              <div class="i"><a href="#p2" title="Pharmacokinetics">Pharmacokinetics</a></div>
              <div class="i"><a href="#p4" title="Indication">Indication</a></div>
              <div class="i"><a href="#p6" title="Hazard Identified">Hazard Identified</a></div>
              <div class="i">
                <a href="#p7" title="">Identification of Critical Effects</a>
              </div>
              <div class="i">
                <a href="#p8" title="Identification of Critical Effects">Point of Departure (PoD) anpks&qtiegle</a>
              </div>
              <div class="i"><a href="#p9" title="Uncertainty Factors">Uncertainty Factors</a></div>
              <div class="i"><a href="#p10" title="PDE Calculation">PDE Calculation</a></div>
              <div class="i"><a href="#p11" title="References">References</a></div>
            </div>
          </div>
        </div>
        <div class="cor">
          <div class="dt f36 font-m">{{ dataInfo.ingredient }}</div>
          <div class="dblock">
            <div class="bt f24 font-m">Physico-Chemical Properties</div>
            <div class="btxt f1 f16">
              <div class="li flex">
                <div class="ll font-m">APID</div>
                <div class="lr">{{ dataInfo.APID }}</div>
              </div>
              <div class="li flex">
                <div class="ll font-m">Chemical Name</div>
                <div class="lr">{{ dataInfo.ingredient }}</div>
              </div>

              <div class="li flex">
                <div class="ll font-m">Molecular Formula</div>
                <div class="lr">{{ dataInfo.molecular_formula }}</div>
              </div>
              <div class="li flex">
                <div class="ll font-m">IUPAC Name</div>
                <div class="lr">{{ dataInfo.IUPAC_name }}</div>
              </div>
              <div class="li flex">
                <div class="ll font-m">Description</div>
                <div class="lr toggleML">
                  <div class="p" v-html="dataInfo.description"></div>
                  <!-- <div class="span"></div> -->
                  <div class="zk">
                    <template
                      v-if="
                        dataInfo.description &&
                        dataInfo.description.length > 120
                      "
                    >
                      <span>Show More</span><span>Show Less</span></template
                    >
                  </div>
                </div>
              </div>
              <div class="li flex">
                <div class="ll font-m">Synonyms</div>
                <div class="lr toggleML">
                  <div class="p" v-html="dataInfo.synonyms"></div>
                  <div class="zk">
                    <template
                      v-if="dataInfo.synonyms && dataInfo.synonyms.length > 120"
                    >
                      <span>Show More</span><span>Show Less</span></template
                    >
                  </div>
                </div>
              </div>
              <div class="li flex">
                <div class="ll font-m">Molecular Weight</div>
                <div class="lr">{{ dataInfo.molecular_weight }}</div>
              </div>
              <div class="li flex">
                <div class="ll font-m">CAS Number</div>
                <div class="lr">{{ dataInfo.CAS_No }}</div>
              </div>
              <div class="li flex" v-if="dataInfo.inchl_key">
                <div class="ll font-m">Inchl Key</div>
                <div class="lr">{{ dataInfo.inchl_key }}</div>
              </div>
              <div class="li flex">
                <div class="ll font-m">Smiles</div>
                <div class="lr">
                  {{ dataInfo.smiles }}
                  <!-- <img data-v-55eec432="" class="svg-container" :src="'http://api2.drugsea.cn/api/image?smiles='+dataInfo.smiles"> -->
                </div>
              </div>
              <div class="li flex">
                <div class="ll font-m">ATC Code</div>
                <div class="lr">{{ dataInfo.ATC_code }}</div>
              </div>
              <div class="li flex" v-if="dataInfo.pharmacotherapeutic">
                <div class="ll font-m">Pharmacotherapeutic Group</div>
                <div class="lr">{{ dataInfo.pharmacotherapeutic }}</div>
              </div>
              <div class="li flex" v-if="dataInfo.appearance">
                <div class="ll font-m">Appearance</div>
                <div class="lr">{{ dataInfo.appearance }}</div>
              </div>
              <div class="li flex" v-if="dataInfo.solubility">
                <div class="ll font-m">Solubility</div>
                <div class="lr">{{ dataInfo.solubility }}</div>
              </div>
              <div class="li flex">
                <div class="ll font-m">Molecular Structure</div>
                <div class="lr">
                  <img :src="dataInfo.molecular_structure" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="detailBox gray">
      <div class="box flex page-inner">
        <div class="col"></div>
        <div class="cor">
          <div class="dblock">
            <div id="p5" class="pos"></div>
            <div class="bt f24 font-m">Purpose and Search Strategy</div>
            <div class="btxt f16" v-if="dataInfo.objective_and_search_strategy">
              <Markdown
                :content="getHt(dataInfo.objective_and_search_strategy)"
              ></Markdown>
            </div>
          </div>

          <div class="dblock">
            <div id="p3" class="pos"></div>
            <div class="bt f24 font-m">Mechanism of Action</div>
            <div class="btxt f16" v-if="dataInfo.mechanism_of_action">
              <Markdown
                :content="getHt(dataInfo.mechanism_of_action)"
              ></Markdown>
            </div>
          </div>
          <div class="dblock" v-if="dataInfo.pharmacokinetics">
            <div id="p2" class="pos"></div>
            <div class="bt f24 font-m">Pharmacokinetics</div>
            <div class="btxt f16">
              <div class="li flex" v-if="dataInfo.pharmacokinetics.absorption">
                <div class="ll">Absorption</div>
                <div
                  class="lr"
                  v-html="dataInfo.pharmacokinetics.absorption"
                ></div>
              </div>
              <div
                class="li flex"
                v-if="dataInfo.pharmacokinetics.distribution"
              >
                <div class="ll">Distribution</div>
                <div
                  class="lr"
                  v-html="dataInfo.pharmacokinetics.distribution"
                ></div>
              </div>
              <div class="li flex" v-if="dataInfo.pharmacokinetics.metabolism">
                <div class="ll">Metabolism</div>
                <div
                  class="lr"
                  v-html="dataInfo.pharmacokinetics.metabolism"
                ></div>
              </div>
              <div class="li flex" v-if="dataInfo.pharmacokinetics.elimination">
                <div class="ll">Elimination</div>
                <div
                  class="lr"
                  v-html="dataInfo.pharmacokinetics.elimination"
                ></div>
              </div>
            </div>
          </div>
          <div class="dblock">
            <div id="p12" class="pos"></div>
            <div class="bt f24 font-m">Pharmacodynamics</div>
            <div class="btxt f16" v-if="dataInfo.pharmacodynamics">
              <Markdown :content="getHt(dataInfo.pharmacodynamics)"></Markdown>
            </div>
          </div>

          <div class="dblock">
            <div id="p4" class="pos"></div>
            <div class="bt f24 font-m">Indication</div>
            <div class="btxt f16" v-if="dataInfo.indication">
              <Markdown :content="processedParagraph(getHt(dataInfo.indication))"></Markdown>
            </div>
          </div>

          <div class="dblock">
            <div id="p6" class="pos"></div>
            <div class="bt flex">
              <div class="tl f24 font-m">Hazard Identified</div>
              <div class="tr">
                <NuxtLink :to="'/APIs/ToxicityData?id=' + dataInfo.id"
                  >More Details</NuxtLink
                >
              </div>
            </div>
            <div class="btxt f16">
              <div
                class="li flex"
                v-for="(item, index) in dataInfo.hazard_identified"
                :key="index"
              >
                <div class="ll Hazard_ll">{{ item.param1 }}</div>
                <div class="lc">{{ item.param2 }}</div>
                <div class="lr">
                  <Markdown :content="getHt(item.param3)"></Markdown>
                </div>
              </div>
            </div>
          </div>
          <div class="dblock">
            <div id="p7" class="pos"></div>
            <div class="bt flex">
              <div class="tl f24 font-m">
                Identification of Critical Effects
              </div>
              <div class="tr">
                <NuxtLink :to="'/APIs/PDE?id=' + dataInfo.id"
                  >More Details</NuxtLink
                >
              </div>
            </div>
            <div class="btxt f16">
              <div
                class="li flex"
                v-for="(
                  item, index
                ) in dataInfo.hepatotoxicity_and_nephrotoxicity"
                :key="index"
              >
                <div class="ll">{{ item.param1 }}</div>
                <div class="lr" v-html="getUrl(item.param2)"></div>
              </div>
            </div>
          </div>
          <div class="dblock">
            <div id="p8" class="pos"></div>
            <div class="bt flex">
              <div class="tl f24 font-m">Point of Departure</div>
            </div>
            <div class="btxt f16">
              <div class="li flex">
                <div class="ll" v-html="dataInfo.point_of_departure"></div>
                <div
                  class="lr"
                  v-html="dataInfo.point_of_departure_detail"
                ></div>
              </div>
            </div>
          </div>
          <div class="dblock">
            <div id="p9" class="pos"></div>
            <div class="bt flex">
              <div class="tl f24 font-m">Uncertainty Factors</div>
            </div>
            <div class="btxt f16">
              <table>
                <tbody>
                  <tr>
                    <th class="f18 font-m">Factors</th>
                    <th class="f18 font-m">Value</th>
                    <th class="f18 font-m">Rationale</th>
                  </tr>

                  <tr
                    v-for="(item, index) in dataInfo.uncertainty_factors"
                    :key="index"
                  >
                    <td class="f18 font-m">{{ item.factors }}</td>
                    <td class="f18 font-m">{{ item.value }}</td>
                    <td>{{ item.rationale }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="dblock">
            <div id="p10" class="pos"></div>
            <div class="bt flex">
              <div class="tl f24 font-m">PDE Calculation</div>
            </div>
            <div class="btxt f16">
              <div class="li fle">
                <!-- <img :src="dataInfo.pde_calculation" alt="" /> -->
                <div class="lr pde" v-if="dataInfo.pde_calculation">
                  <Markdown
                    :content="dataInfo.pde_calculation"
                  ></Markdown>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="detailBox">
      <div class="pos" id="p11"></div>
      <div class="box flex page-inner">
        <div class="col"></div>
        <div class="cor">
          <div class="dblock">
            <div class="bt f24 font-m">References</div>
            <div class="btxt f16">
              <ul>
                <li v-for="(item, index) in dataInfo.references" :key="index">
                  <div
                    :id="'add' + (index + 1)"
                    style="position: relative; top: -150px"
                  ></div>
                  <a :href="getStringArrayHref(item.links,0)" target="_blank">{{ item.text }}</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { apiInfo } from "@/api/sections";
import { ElMessageBox } from "element-plus";
export default {
  async setup() {
    const route = useRoute();
    const info = {
      name: "Paracetamol (Oral)",
      IUPACName: "",
    };
    const state = useState("global_userInfo");
    return { info, state };
  },
  data() {
    return {
      dataInfo: {},
      token: "",
    };
  },
  methods: {
    processedParagraph(data) {
      // 正则表达式匹配包含中文全角引号的数组字符串，并假设它位于段落末尾
      const arrayRegex = /\[“(?:\d+(?:,\s*\d+)*)”\]$/;
      const match = data.match(arrayRegex);
 
      if (match) {
        // 提取数组字符串并转换为锚点字符串
        const arrayStr = match[0];
        const numbers = arrayStr
          .slice(1, -1) // 去除最外层的方括号
          .replace(/“/g, '"') // 将中文全角引号替换为英文半角引号
          .replace(/”/g, '"')
          .split(',') // 分割成数组
          .map(number => number.trim()); // 去除空格（如果有的话）
 
        // 生成锚点字符串
        const anchorString = numbers.map(number => `<a href="#add${number}">${number}</a>`).join(',');
 
        // 替换原始段落中的数组字符串
        return data.replace(arrayRegex, anchorString);
      } else {
        // 如果没有匹配到数组字符串，则返回原始段落
        return data;
      }
    },
    getHt(html) {
      let regex = /@@/g;
      let r1=html.indexOf('@@');
      let h1=html.substring(0,r1);
      let h2=html.substring(r1+2);
      let ht=h1+`<a href='#p11'>${h2}</a>`;
      //ht = html.replace(regex, "\n");
      return ht;
    },
    getStringArrayHref(str,index=0){
      var arr=JSON.parse(str)??[];
      return arr[index]
    },
    getUrl(html) {
      let html1 = "";
      let html2 = "";
      let html3 = "";
      if (html.split("[")) {
        html1 = html.split("[")[0];
        if (html.split("[")[1]) {
          html2 =
            '[<a href="#add' +
            html.split("[")[1].split("]")[0] +
            '">' +
            html.split("[")[1].split("]")[0] +
            "</a>]";
          html3 = html.split("[")[1].split("]")[1];
        }
      }
      return `${html1}${html2}${html3}`;
    },
    hasPermision: function (id) {
      const that = this;
      return that.state.permission.includes(id) || false;
    },
  },
  computed: {},
  mounted: function () {
    var that = this;

    if (localStorage.getItem("userinfo")) {
      that.token = JSON.parse(localStorage.getItem("userinfo")).token;
    }
    that.$nextTick(function () {
      apiInfo({
        id: that.$route.params.id,
        token: that.token,
      }).then((res) => {
        this.dataInfo = res.data;
      });

      $(".toggleML").each(function () {
        var btn = $(this).find(".zk");
        var short = $(this).find(".span");
        var info = $(this).find(".hid");
        var line = $(this).find(".p");
        short.text(info.text().substr(0, 120) + "...");
        btn.click(function () {
          if ($(this).hasClass("act")) {
            $(this).removeClass("act");
            line.removeClass("act");
            short.text(info.text().substr(0, 120) + "...");
          } else {
            $(this).addClass("act");
            line.addClass("act");
            short.html(info.html());
          }
        });
      });
    });
  },
};
</script>
